<script setup lang="ts">
import { ref, reactive, watchEffect, toRefs } from "vue";
import { Field, Calendar } from "vant";

type selectInfo = {
  label: string; // 名称项
  modelValue: Array<Date>; // 双向绑定
  name?: string; // key值
  placeholder?: string;
  required?: boolean; // 是否必填，默认否
  allowClear?: boolean; // 是否需要删除按钮，默认否
  rules?: Array<Object>; // 验证规则
  height?: string;
  minDate?: Date; // 最小可选日期
  maxDate?: Date; // 最大可选日期
  rowHeight?: number; //日历行高
  showTitle?: boolean; //是否展示标题
  title?: string; //标题
  showSubtitle?: boolean; //是否展示日历副标题（年月）
  readonly?: boolean; //是否为只读状态，只读状态下不能选择日期
  confirmText?: string; //确认按钮的文字
};
const formatDate = (date: any) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;

const propsData = withDefaults(defineProps<selectInfo>(), {
  required: false,
  allowClear: false,
  height: "50%",
  showTitle: false,
  readonly: false,
});
let timeval = ref(propsData.modelValue);

const result = ref(
  formatDate(propsData.modelValue[0]) +
    "-" +
    formatDate(propsData.modelValue[1])
);
const showPicker = ref(false);
const rightIcon = ref("");
const isLink = ref(true);

const emits = defineEmits<{
  (e: "update:modelValue", val: Array<string>): void;
}>();

const onConfirm = function (selectedDate: any) {
  showPicker.value = false;
  const { selectedValues } = selectedDate;
  const dateVal =
    formatDate(selectedDate[0]) + "-" + formatDate(selectedDate[1]);
  result.value = dateVal;
  rightIcon.value = "clear";

  emits("update:modelValue", result.value.split("-"));
};

const inputClick = function (e: any) {
  if (e.target.className.indexOf("van-icon-clear") !== -1) {
    result.value = "";
  } else {
    showPicker.value = true;
  }
};

// 修改时数据回显
// if (propsData.modelValue) {
//   result.value = modelValue.value;
//   dateArr.data = [];
// }

watchEffect(() => {
  if (result.value) {
    rightIcon.value = "clear";
    isLink.value = false;
  } else {
    rightIcon.value = "";
    isLink.value = true;
  }
  // console.log("更新值", result.value);
});
</script>
<template>
  <div>
    <field
      v-model="result"
      readonly
      :placeholder="propsData.placeholder"
      :right-icon="rightIcon"
      :is-link="isLink"
      :name="propsData.name"
      :required="propsData.required"
      :label="propsData.label"
      :rules="propsData.rules"
      @click="inputClick"
    />
    <!-- <popup v-model:show="showPicker" round position="bottom">
			<date-picker v-model="data" @cancel="showPicker = false" @confirm="onConfirm" />
		</popup> -->
    <Calendar
      v-model:show="showPicker"
      :style="{ height: propsData.height }"
      :show-title="propsData.showTitle"
      type="range"
      :min-date="propsData.minDate"
      :row-height="propsData.rowHeight"
      @confirm="onConfirm"
      :default-date="timeval"
      :title="propsData.title"
      :show-subtitle="propsData.showSubtitle"
      :readonly="propsData.readonly"
      :confirm-text="propsData.confirmText"
    />
  </div>
</template>
